<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%--
    JSP Name : jspName.jsp
    Description : 설명을 기술합니다.
    author ETLee
    since 2012. 6. 28.
    version 1.0
    Modification Information
       since          author              description
    ===========    =============    ===========================
    2012. 6. 28.     ETLee     최초 생성
--%>

<%@ include file="/WEB-INF/jsp/com/include/declare.jspf" %>
<%@ include file="/WEB-INF/jsp/com/include/doctype.jspf" %>
<script type="text/javascript">
    fnTabLayerToggle(${ bizNwrkMgmtVO.brViewType });
</script>

<div id="branchstore" class="layerpopup branchstore" style="top: 250px; display: block; ">
    <div class="layerpopup-inner">
        <div class="layerpopup-contents subsection0">

            <div id="tab-wrap" class="tab-wrap02">
                <ul>
                    <li class="on"><a href="javascript:fnView('${ result.brCd }','${ result.brScn }', '0', 'pop');"><img src="/kr/images/layerpopup/tab_branch01_over.gif" alt="영업점 소개"></a></li>
                    <li><a href="javascript:fnView('${ result.brCd }','${ result.brScn }', '1', 'pop');"><img src="/kr/images/layerpopup/tab_branch02_out.gif" alt="영업사원보기"></a></li>
                    <li><a href="javascript:fnView('${ result.brCd }','${ result.brScn }', '2', 'pop');"><img src="/kr/images/layerpopup/tab_branch03_out.gif" alt="지도보기"></a></li>
                </ul>
            </div>
            <!-- 영업점 소개 -->
            <div id="br" class="service-tab" style="display:;">
                <div class="tab-wrap02-cont">
                    <div class="branch-information">
                        <p class="store-name">
                            현대자동차 <em>${ result.brNm } ${ result.brScnNm }</em>
                        </p>
                        <div class="information">
                            <ul class="list-type01">
                                <li><b>전화번호</b> <span class="bar">|</span> <c:out value="${ result.brCcpc }"/></li>
                                <li><b>지점주소</b> <span class="bar">|</span> <c:out value="${ result.brWpa }"/> <c:out value="${ result.brAdr }"/> <c:out value="${ result.brDtlAdr }"/></li>
                            </ul>
                            <p class="comment">
                            <c:set value="${fnc:checkHtmlView(result.brItdc)}" var="test"/>
                            ${fn:replace(test, lf, "<br/>")}
                            </p>
                        </div>
                    </div>
                    <div class="gallery-wraper">
                        <div class="gallery-wrap02 subsection02">
                            <div class="gallery-cutter02" style="">
                                <div class="move-body" num="0" style="width: 2800px; ">
                                <c:if test="${empty result.brItdcImg4}">
                                    <div style=""><c:if test="${not empty result.brItdcImg1}"><img src="/kr/images/storeinfo/<c:out value='${result.brItdcImg1}'/>" width="700" height="320" alt="영업점 이미지1"></c:if></div>
                                    <div><c:if test="${not empty result.brItdcImg2}"><img src="/kr/images/storeinfo/<c:out value='${result.brItdcImg2}'/>" width="700" height="320" alt="영업점 이미지2"></c:if></div>
                                    <div><c:if test="${not empty result.brItdcImg3}"><img src="/kr/images/storeinfo/<c:out value='${result.brItdcImg3}'/>" width="700" height="320" alt="영업점 이미지3"></c:if></div>
                                </c:if>
                                <c:if test="${not empty result.brItdcImg4}">
                                    <c:if test="${not empty result.brItdcImg4 }"><div style=""><img src="/kr/file/imagePathView.do?nrFilNm=biz/<c:out value='${result.brItdcImg4}'/>" width="700" height="320" alt="영업점 이미지4"></div></c:if>
                                    <c:if test="${ not empty result.brItdcImg5 }"><div><img src="/kr/file/imagePathView.do?nrFilNm=biz/<c:out value='${result.brItdcImg5}'/>" width="700" height="320" alt="영업점 이미지5"></div></c:if>
                                    <c:if test="${ not empty result.brItdcImg6 }"><div><img src="/kr/file/imagePathView.do?nrFilNm=biz/<c:out value='${result.brItdcImg6}'/>" width="700" height="320" alt="영업점 이미지6"></div></c:if>
                                    <c:if test="${ not empty result.brItdcImg7 }"><div><img src="/kr/file/imagePathView.do?nrFilNm=biz/<c:out value='${result.brItdcImg7}'/>" width="700" height="320" alt="영업점 이미지7"></div></c:if>
                                    <c:if test="${ not empty result.brItdcImg8 }"><div><img src="/kr/file/imagePathView.do?nrFilNm=biz/<c:out value='${result.brItdcImg8}'/>" width="700" height="320" alt="영업점 이미지8"></div></c:if>
                                    <c:if test="${ not empty result.brItdcImg9 }"><div><img src="/kr/file/imagePathView.do?nrFilNm=biz/<c:out value='${result.brItdcImg9}'/>" width="700" height="320" alt="영업점 이미지9"></div></c:if>
                                </c:if>
                                </div>
                            </div>
                            <div class="control-area" style="display: none; ">
                                <button class="prev-btn disabled" style="display: none; "><img src="/kr/images/common/button/btn_gallery_prev.png" alt="이전 이미지"></button>
                                <button class="next-btn"><img src="/kr/images/common/button/btn_gallery_next.png" alt="다음 이미지"></button>
                            </div>
                        </div>
                    </div>
                    <div class="exhibit-car-info">
                        <h2><img src="/kr/images/layerpopup/h2_branch01.gif" alt="전시차량정보"></h2>
						<p>※ 전시 차량은 당사 사정에 따라 사전고지 없이 변경 될 수 있습니다. 방문 전에 꼭 해당 지점/대리점에 확인해주시기 바랍니다.</p>
                        <div class="datatable-wrap subsection04">
                            <table summary="차량정보, 색상">
                            <caption>전시차량정보 정리</caption>
                            <colgroup>
                                <col width="60%">
                                <col width="40%">
                            </colgroup>
                            <thead>
                            <tr>
                                <th scope="col">차량정보</th>
                                <th scope="col">색상</th>
                            </tr>
                            </thead>
                            <tbody>
                    <c:choose>
                    <c:when test="${not empty carList}">
                        <c:forEach var="car" items="${ carList }" varStatus="status">
                            <tr>
                                <td>
                                    <div class="car-info-wrap">
                                        <c:out value='${ car.saleCtyHanNm }'/>
                                        <%-- TODO 차량 이미지 팢업 처리 필요
                                        <img src="/kr/images/common/button/btn_detail03.gif" alt="자세히보기" class="detail">
                                         --%>
                                    </div>
                                </td>
                                <td class="center last"><c:out value='${ car.xrclCtyNm }'/></td>
                            </tr>
                        </c:forEach>
                    </c:when>
                    <c:when test="${empty carList}">
                            <tr>
                                <td class="center last" colspan="2">
                                    전시 차량이 없습니다.
                                </td>
                            </tr>
                    </c:when>
                    </c:choose>

                            </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <!-- //영업점 소개 -->
            <!-- 영업사원보기 -->
            <div id="cmst" class="service-tab" style="display:none;min-height:">
                <div class="tab-wrap02-cont">
                    <div class="branch-information">
                        <p class="store-name">
                            현대자동차 <em><c:out value='${ result.brNm }'/> <c:out value='${ result.brScnNm }'/></em>
                        </p>
                        <div class="information">
                            <ul class="list-type01">
                                <li><b>전화번호</b> <span class="bar">|</span> <c:out value='${ result.brCcpc }'/></li>
                                <li><b>지점주소</b> <span class="bar">|</span> <c:out value='${ result.brWpa }'/> <c:out value='${ result.brAdr }'/> <c:out value='${ result.brDtlAdr }'/></li>
                            </ul>
                        </div>
                    </div>
                    <div class="salesman-list" style="min-height:350px;max-height:550px; overflow:auto;">
                    <c:forEach var="cmst" items="${ cmstList }" varStatus="status">
                        <div class="row">
                            <div class="thumb">
                            <c:if test="${ cmst.psnPhtgExpsSt != 'N' }">
                            <c:choose>
                                <c:when test="${ not empty cmst.cmPhtgNm }">
                                    <img src='/kr/file/imagePathView.do?nrFilNm=cmst/${cmst.cmPhtgNm}' width='114px' height='123px' alt=''/>
                                </c:when>
                                <c:when test="">
                                    <img src="http://tops.hmc.co.kr/upload/photo/${cmst.cmEeno}.jpg" style="width:114px; height:123px;" />
                                </c:when>
                                <c:otherwise>
                                    <img src="http://tops.hmc.co.kr/upload/photo/${cmst.cmEeno}.jpg" style="width:114px; height:123px;" />
                                </c:otherwise>
                            </c:choose>
                            </c:if>
                            </div>
                            <div class="information">
                                <ul style="padding:0 0 0 10px;">
                                    <li>
                                        <em class="d-tit"><img src="/kr/images/layerpopup/txt_branch01.gif" alt="성명"></em>
                                        <p class="d-txt"><c:out value='${ cmst.cmNm }'/></p>
                                    </li>
                                    <li>
                                        <em class="d-tit"><img src="/kr/images/layerpopup/txt_branch02.gif" alt="소속"></em>
                                        <p class="d-txt"><c:out value='${ result.brNm }'/></p>
                                    </li>
                                    <li>
                                        <em class="d-tit"><img src="/kr/images/layerpopup/txt_branch03.gif" alt="휴대폰"></em>
                                        <p class="d-txt"><c:out value='${ cmst.cmCcpc }'/></p>
                                    </li>
                                    <li>
                                        <em class="d-tit"><img src="/kr/images/layerpopup/txt_branch04.gif" alt="이메일"></em>
                                        <p class="d-txt"><c:out value='${ cmst.cmEml }'/></p>
                                    </li>
                                    <li>
                                        <em class="d-tit"><img src="/kr/images/layerpopup/txt_branch05.gif" alt="인사말"></em>
                                        <p class="d-txt"><c:out value='${ cmst.cmGret }'/></p>
                                    </li>
                                </ul>
                            <c:if test="${cmst.cnsPsblYn != 'N'}">
                                <a href="javascript:cMstSeleted('${cmst.cmEeno}','${cmst.brCd}','${cmst.ctrCd}','${cmst.brNm}','${cmst.cmNm}','${cmst.cmCcpc}','${cmst.cmEml}')">
                                    <img src="/kr/images/layerpopup/btn_application.gif" alt="구매상담신청" class="application">
                                </a>
                            </c:if>
<!--                                 <a href="/kr/pur/purCounselReqPaging.do"><img src="/kr/images/layerpopup/btn_application.gif" alt="구매상담신청" class="application" /></a> -->
                            </div>
                        </div>
                    </c:forEach>
                    </div>
                </div>
            </div>
            <!-- //영업사원보기 -->
            <!-- 지도보기 -->
            <div id="brMap" class="service-tab" style="display:none;">
                <div class="tab-wrap02-cont">
                    <div class="branch-information">
                        <p class="store-name">
                            현대자동차 <em><c:out value='${ result.brNm }'/> <c:out value='${ result.brScnNm }'/></em>
                        </p>
                        <div class="information">
                            <ul class="list-type01">
                                <li><b>전화번호</b> <span class="bar">|</span> <c:out value='${ result.brCcpc }'/></li>
                                <li><b>지점주소</b> <span class="bar">|</span> <c:out value='${ result.brWpa }'/> <c:out value='${ result.brAdr }'/> <c:out value='${ result.brDtlAdr }'/></li>
                            </ul>
                        </div>
                    </div>
                    <div class="map-api-area">
                        <div id="mapArea"></div>
                    </div>
                    <div class="contact-info">
                        <h2><img src="/kr/images/layerpopup/h2_branch02.gif" alt="찾아오시는길"></h2>
                        <div class="contact-detail">
                            <ul class="list-type01">
                                <li>
                                    <b class="d-tit">지하철</b>
                                    <p class="d-txt"><c:out value='${ result.brUgrdIron }'/></p>
                                </li>
                                <li>
                                    <b class="d-tit">버스</b>
                                    <p class="d-txt"><c:out value='${ result.brBus }'/></p>
                                </li>
                                <li>
                                    <b class="d-tit">자가용</b>
                                    <p class="d-txt"><c:out value='${ result.brPvcr }'/></p>
                                </li>
                                <li>
                                    <b class="d-tit">주차장</b>
                                    <p class="d-txt"><c:out value='${ result.brPklt }'/></p>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
            <!-- //지도보기 -->
        </div>
    <!-- close -->
        <div class="close-area">
            <div class="close-area-inner">
                <img src="/kr/images/layerpopup/btn_close.gif" alt="닫기" class="close" onclick="closeLayer('#popContents');">
            </div>
        </div>
    <!-- //close -->
    </div>
</div>
<script type="text/javascript">

var oCenterPoint = new nhn.api.map.LatLng('<c:out value="${result.brYcoo}"/>', '<c:out value="${result.brXcoo}"/>');
nhn.api.map.setDefaultPoint('LatLng');
oMap = new nhn.api.map.Map('mapArea', {
            point : oCenterPoint,
            zoom : 12, // - 초기 줌 레벨은 10으로 둔다.
            enableWheelZoom : false,
            enableDragPan : true,
            enableDblClickZoom : false,
            mapMode : 0,
            activateTrafficMap : false,
            activateBicycleMap : false,
            minMaxLevel : [ 1, 14 ],
            size : new nhn.api.map.Size(700, 400)
});

 var mapZoom = new nhn.api.map.ZoomControl(); // - 줌 컨트롤 선언
                mapZoom.setPosition({left:80, bottom:40}); // - 줌 컨트롤 위치 지정
                oMap.addControl(mapZoom); // - 줌 컨트롤 추가.

var oSize = new nhn.api.map.Size(28, 37);
var oOffset = new nhn.api.map.Size(14, 37);
var oIcon = new nhn.api.map.Icon('/kr/images/common/button/pin_spot2.png', oSize, oOffset);

/*
 * 초기 중심좌표 사용
 */
var marker = new nhn.api.map.Marker(oIcon);
marker.setPoint(oCenterPoint);
oMap.addOverlay(marker);

/*
 * infowindow 사용 시
 */
var mapInfoTestWindow = new nhn.api.map.InfoWindow(); // - info window 생성
//- InfoWindow 에 들어갈 내용은 setContent 로 자유롭게 넣을 수 있습니다. 외부 css를 이용할 수 있으며,
//- 외부 css에 선언된 class를 이용하면 해당 class의 스타일을 바로 적용할 수 있습니다.
//- 단, DIV 의 position style 은 absolute 가 되면 안되며,
//- absolute 의 경우 autoPosition 이 동작하지 않습니다.
mapInfoTestWindow.setContent('<div style="border-top:1px solid #666; border-bottom:2px groove black; border-left:1px solid; border-right:2px groove black;margin-bottom:1px;color:black;background-color:white; width:auto; height:auto;">'+
'<span style="color: #666; !important;display: inline-block;font-size: 12px !important;font-weight: bold !important;letter-spacing:-1px !important;white-space: nowrap !important; padding: 3px 3px 3px 3px !important; ">' +
'${ result.brNm } ${result.brScnNm}' + '<br /> </span></div>');
mapInfoTestWindow.setPoint(oCenterPoint);
mapInfoTestWindow.setVisible(true);
mapInfoTestWindow.setPosition({right : 15, top : 30});
mapInfoTestWindow.autoPosition();
oMap.addOverlay(mapInfoTestWindow); // - 지도에 추가.

</script>
